<template>
  <el-dialog v-model="_visible" :width="width" :close-on-click-modal="false">
    <template #title>
      <slot name="title"></slot>
    </template>

    <slot></slot>
    <template #footer>
      <el-row justify="space-between" class="dialog-footer">
        <el-button @click="_visible = false">取消</el-button>
        <el-button v-loading="saveLoading" type="primary" @click="submit">{{
          confirmButtonText
        }}</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  saveLoading: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: 960,
  },
  confirmButtonText: {
    type: String,
    default: '创建',
  },
})
const emits = defineEmits(['update:modelValue', 'submit'])

const _visible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  },
})

const submit = () => {
  emits('submit')
}
</script>
